import React from "react";
import * as api from "../api/index"
import {useDispatch,useSelector} from "react-redux"
import { Form, Input, Button, Radio, Space, NoticeBar } from "react-vant";
import { Anyaction } from "../untils/index";
type Props = {};

type FieldType = { account?: string; loginMethod?: "login" | "reg" };
const Login = (props: Props) => {
  const [form] = Form.useForm<FieldType>();
  const dispatch:Anyaction=useDispatch()
  const account = Form.useWatch("account", form);
  const type = Form.useWatch("type", form);
  const onFinish = (values: Anyaction) => {
    console.log(values);
    if (values.type == "login") {
    dispatch(api.login(values))
    } else if (values.type == "reg") {
      dispatch(api.reg(values))
    }
  };

  return (
    <div>
      <Form
        onFinish={onFinish}
        form={form}
        initialValues={{
          type: "login",
        }}
        footer={
          <>
            <NoticeBar>你将使用 {type === "login" ? "登录" : "注册"}</NoticeBar>
            <div style={{ margin: "16px 16px 0" }}>
              <Button round nativeType="submit" type="primary" block>
                提交
              </Button>
            </div>
          </>
        }
      >
        <Form.Item name="type" label="登录方式">
          <Radio.Group>
            <Space>
              <Radio name="login">登录</Radio>
              <Radio name="reg">注册</Radio>
            </Space>
          </Radio.Group>
        </Form.Item>
        {type === "login" && (
          <>
            <Form.Item name="username" label="用户名">
              <Input placeholder="请输入用户名" />
            </Form.Item>
            <Form.Item name="password" label="密码">
              <Input placeholder="请输入密码" />
            </Form.Item>
          </>
        )}
        {type === "reg" && (
          <>
            <Form.Item name="username" label="用户名">
              <Input placeholder="请输入用户名" />
            </Form.Item>
            <Form.Item name="password" label="密码">
              <Input placeholder="请输入密码" />
            </Form.Item>
          </>
        )}
      </Form>
    </div>
  );
};

export default Login;
